<template>
    <div :class="[{ header: true }, { over: isOver }]">
        <el-menu :default-active="activeIndex" mode="horizontal" router>
            <div class="logoCon">
                <!-- <img class="logo" src="@/assets/cakeLogo.png" alt=""> -->
                <div class="logoText">𝒞𝒶𝓀ℯ𝒮𝓉ℴ𝓇ℯ</div>
            </div>
            <el-menu-item v-for="item in menuList" :key="item.key" :index="item.key" :route="item.route">
                <span style="font-size: 17px;">{{ item.name }}</span>
            </el-menu-item>
            <div class="menu">
                <div class="menuItem" @click="goCart">
                    <svg t="1734417998514" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5003" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="40" height="200">
                        <path
                            d="M352.456912 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C416.446162 860.586595 387.891819 832.032253 352.456912 832.032253L352.456912 832.032253z"
                            fill="#fff" p-id="5004"></path>
                        <path
                            d="M800.55367 832.032253c-35.434907 0-63.989249 28.554342-63.989249 63.989249 0 35.434907 28.554342 63.989249 63.989249 63.989249s63.989249-28.554342 63.989249-63.989249C864.54292 860.586595 835.816563 832.032253 800.55367 832.032253L800.55367 832.032253z"
                            fill="#fff" p-id="5005"></path>
                        <path
                            d="M864.026877 800.037628 344.200235 800.037628c-46.099782 0-86.695112-36.466991-92.199563-83.082815l-54.356459-382.043339L166.853687 156.360826c-1.892155-15.653284-16.169326-28.382328-29.930455-28.382328L95.983874 127.978498c-17.717453 0-31.994625-14.277171-31.994625-31.994625s14.277171-31.994625 31.994625-31.994625l40.767344 0c46.615824 0 87.727196 36.466991 93.403662 83.082815l30.790526 177.86259L315.473879 708.698135c1.720141 14.793214 15.309256 27.350244 28.726356 27.350244l519.826642 0c17.717453 0 31.994625 14.277171 31.994625 31.994625S881.744331 800.037628 864.026877 800.037628z"
                            fill="#fff" p-id="5006"></path>
                        <path
                            d="M384.279523 672.05913c-16.685369 0-30.618512-12.729044-31.82261-29.586427-1.376113-17.545439 11.868974-33.026709 29.586427-34.230808l434.163615-31.994625c15.997312-0.172014 29.414413-12.55703 31.134554-26.834201l50.400134-288.295649c1.204099-10.664875-1.720141-22.533848-8.084663-29.758441-4.128339-4.644381-9.288762-7.052579-15.309256-7.052579L319.946246 224.3064c-17.717453 0-31.994625-14.277171-31.994625-31.994625S302.400806 159.973123 319.946246 159.973123l554.05745 0c24.426004 0 46.959852 10.148833 63.301193 28.554342 18.749538 21.157736 27.178229 50.744163 23.565933 81.706703l-50.400134 288.467663c-5.504452 44.895683-45.927768 81.362674-92.027549 81.362674l-431.755417 31.82261C385.82765 671.887116 384.967579 672.05913 384.279523 672.05913z"
                            fill="#fff" p-id="5007"></path>
                    </svg>
                </div>
                <div class="menuItem" @click="showUser">
                    <svg t="1734418607208" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="8942" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="40" height="200">
                        <path
                            d="M512 447.223c-88.224 0-160-71.776-160-160s71.776-160 160-160c88.225 0 160 71.776 160 160s-71.775 160-160 160z m0-256c-52.935 0-96 43.065-96 96s43.065 96 96 96 96-43.065 96-96-43.065-96-96-96zM454.901 870.594c-96.594 0-184.933-3.802-231.263-49.955C203.308 800.386 193 774.164 193 742.701c0-31.629 10.247-62.812 30.457-92.686 17.978-26.573 42.908-50.741 74.098-71.833C359.256 536.46 437.418 512.53 512 512.53c74.55 0 152.55 23.943 214.002 65.691 31.05 21.094 55.861 45.273 73.746 71.867C819.822 679.937 830 711.096 830 742.701c0 31.552-10.317 57.827-30.664 78.097-50.714 50.521-151.822 50.128-258.88 49.723a7395.45 7395.45 0 0 0-56.914-0.001c-9.605 0.037-19.163 0.074-28.641 0.074zM512 806.447c9.567 0 19.149 0.037 28.701 0.073 49.52 0.191 96.284 0.37 135.808-4.396 38.418-4.633 64.546-13.604 77.659-26.668 5.079-5.06 11.832-13.96 11.832-32.755 0-38.089-27.688-78.744-75.963-111.54C638.933 596.442 574.04 576.53 512 576.53c-126.309 0-255 83.862-255 166.171 0 18.675 6.738 27.547 11.807 32.596 32.045 31.922 128.975 31.55 214.491 31.224 9.556-0.037 19.139-0.074 28.702-0.074z"
                            fill="#ffffff" p-id="8943"></path>
                    </svg>
                </div>
            </div>
        </el-menu>
    </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { inject } from 'vue'
import { useUserStore } from '@/stores/user';
const userStore = useUserStore()
const { setUserActive } = inject('userActive')
const router = useRouter()
const activeIndex = ref('/')

const props = defineProps({
    needColor: {
        type: Boolean,
        default: false
    }
})
const isOver = ref(props.needColor)
watch(() => props.needColor, (newVal) => {
    isOver.value = newVal
})
// 监听页面滚动，当滚动超过800时，背景变成白色
onMounted(() => {
    // 当前页面路由
    activeIndex.value = router.currentRoute.value.path
    window.addEventListener('scroll', () => {
        // 调整，防止跳转后导航栏颜色没有变化
        if (window.scrollY > 100 || props.needColor) {
            isOver.value = true
        } else {
            isOver.value = false
        }
    })
})
//监听当前所在路由 ！
router.afterEach((to) => {
    activeIndex.value = to.path
})

// 从router中拿到路由信息
const menuList = router.getRoutes().filter(item => item.meta.ifShow).map(item => {
    return {
        key: item.path,
        name: item.meta.name,
        route: item.path
    }
})

const showUser = () => {
    if (userStore.user) {
        setUserActive(true)
    }
    else {
        router.push('/login')
    }
}

const goCart = () => {
    console.log('1');

    router.push('/cart')
}
</script>


<style scoped lang="scss">
.header {
    width: 100%;
    position: fixed;
    z-index: 996;
    // 设置字体和背景颜色主题色，方便在.over里面切换颜色
    transition: all 0.3s ease-in-out;
    font-family: SourceHanSerifSC1, PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei, serif;

    &.over {
        background-color: #fff;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        color: black !important;

        .logoText {
            color: black !important;
        }

        .el-menu-item {
            color: black !important;

            &:hover {
                color: black !important;
            }

            &.is-active {
                color: black !important;
                border-bottom: 2px solid #000000;
            }
        }

        .icon {
            path {
                fill: black !important;
            }
        }
    }

    .logoCon {
        display: flex;
        padding-left: 40px;
        margin-right: 80px;

        .logo {
            height: 90px;
            width: 90px;
            padding: 20px;
            box-sizing: border-box;
        }

        .logoText {
            font-size: 40px;
            font-weight: 200;
            color: white;
            font-family: 'Courier New', Courier, monospace;
            text-align: center;
            line-height: 90px;
        }

    }

    .menu {
        height: 100%;
        padding: 20px;
        padding-top: 30px;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        position: absolute;
        right: 40px;
        gap: 20px;

        .menuItem {
            cursor: pointer;
        }

        .icon {
            height: 30px;
        }
    }

    .el-menu--horizontal {
        --el-menu-horizontal-height: 80px;
        background-color: transparent;
        box-shadow: none;
        border: 0 !important;
    }

    .el-menu-item {
        transition: all 0.3s ease-in-out;
        box-sizing: border-box;
        padding-top: 10px;
        color: white;

        &:hover {
            color: #fff;
            background-color: transparent;
        }

        &.is-active {
            color: #fff !important;
            background-color: #00000000 !important;
            border-bottom: 2px solid #fff;
        }
    }

}
</style>
